<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Document</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>

<body>
    <!-- 头部 -->
    <header class="header" id="header">
        <nav class="navbar navbar-fixed-top">
            <div class="container">
                <!-- LOGO -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-collapse" >
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="logo wow fadeInLeft" href="javascript:void(0)">
                        <img src="./assets/images/sky-logo-header.png" alt="">
                    </a>
                </div>
                <!-- 导航 -->
                <div class=" navbar-collapse collapse" id="bs-example-navbar-collapse-1" >
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html" class="wow fadeInRight animated" data-wow-delay="100ms">首页</a></li>
                        <li><a href="tow.html" class="wow fadeInRight animated" data-wow-delay="200ms">按摩</a></li>
                        <li><a href="three.html" class="wow fadeInRight animated" data-wow-delay="300ms">别墅Party</a>
                        </li>
                        <li><a href="index.html" class="wow fadeInRight animated" data-wow-delay="400ms">首页</a></li>
                        <li><a href="tow.html" class="wow fadeInRight animated"
                                data-wow-delay="500ms">按摩</a></li>
                        <li><a href="three.html" class="wow fadeInRight animated" data-wow-delay="600ms">别墅Party</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- BEST -->
    <div class="best">
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="./assets/images/about-icon-1.png" 
                            alt="" class="img-responsive">
                        </div>
                        <h6 class="sky-h6">主卧室</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="./assets/images/about-icon-2.png" 
                            alt="" class="img-responsive">
                        </div>
                        <h6 class="sky-h6">海景阳台</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="./assets/images/about-icon-3.png" 
                            alt="" class="img-responsive">
                        </div>
                        <h6 class="sky-h6">游泳池和水疗中心</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="./assets/images/about-icon-4.png" 
                            alt="" class="img-responsive">
                        </div>
                        <h6 class="sky-h6">Wifi覆盖范围</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="./assets/images/about-icon-5.png" 
                            alt="" class="img-responsive">
                        </div>
                        <h6 class="sky-h6">很棒的套餐</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="./assets/images/about-icon-6.png" 
                            alt="" class="img-responsive">
                        </div>
                        <h6 class="sky-h6">每天清洁</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="./assets/images/about-icon-7.png" 
                            alt="" class="img-responsive">
                        </div>
                        <h6 class="sky-h6">丰盛早餐</h6>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="wrap-best">
                        <div class="icon-best">
                            <img src="./assets/images/about-icon-8.png" 
                            alt="" class="img-responsive">
                        </div>
                        <h6 class="sky-h6">机场出租车</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ABOUT -->
    <div id="about" class="about-us section-padding">
        <div class="container">
            <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="about_img">
                    <img src="./assets/images/about.jpg" alt="" class="img-responsive" 
                    style="margin: 0 auto;">
                </div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="about-us-content">
                    <h2>
                        关于我们的
                        <span>按摩历史</span>
                    </h2>
                    <div class="about-line"></div>
                    <p>
                        按摩在我国已经有近两千年的历史，
                        我国最早运用按摩的时代可追溯到原始社会，
                        我们的祖先在生活和劳动中，身体常会因受到外伤而出现疼痛，
                        人类会很自然的用手或木棒按摩或轻叩受损部位，
                        达到消肿止痛的效果。在这种经验的积累下，
                        我们的祖先把本能按摩演变成了系统的治疗和养生方法。


                    </p>
                    <p>
                        随着人们对按摩的运用和认识的提高，按摩医疗和养生进入到快速发展及理论成熟时期，
                        该时期主要包括隋唐至宋元时期。主要表现在医疗机构设置按摩科，并建立了按摩医政。
                        在《隋书·五官志》、《旧唐书·职官志》中有按摩博士、按摩工、
                        按摩生等岗位的记载，并对按摩的医疗流程有严格的规定。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- ABOUT -->
    <div class="works_area section-padding">
        <div class="container-fluid">
            <div class="row text-center">
                <div class="section-title wow zoomIn">
                    <h2>
                        为什么选择 
                        <span>我们</span>
                    </h2>
                    <div class="line"></div>
                    <p>
                        关于我们的spa项目。
                        我们有八大热门项目，我们每位员工都是精英中的精英。
                    </p>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 no-padding">
                    <div class="grid">
                        <div class="effect-apollo">
                            <img src="./assets/images/1.jpg" alt="" class="prettyPhoto image_zoom">
                            <figcaption>
                                <a href="./assets/images/1.jpg" class="prettyPhoto image_zoom"></a>
                                <p>画眉修眉</p>
                            </figcaption>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 no-padding">
                    <div class="grid">
                        <div class="effect-apollo">
                            <img src="./assets/images/2.jpg" alt="" class="prettyPhoto image_zoom">
                            <figcaption>
                                <a href="./assets/images/2.jpg" class="prettyPhoto image_zoom"></a>
                                <p>泰式按摩</p>
                            </figcaption>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 no-padding">
                    <div class="grid">
                        <div class="effect-apollo">
                            <img src="./assets/images/3.jpg" alt="" class="prettyPhoto image_zoom">
                            <figcaption>
                                <a href="./assets/images/3.jpg" class="prettyPhoto image_zoom"></a>
                                <p>石疗</p>
                            </figcaption>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 no-padding">
                    <div class="grid">
                        <div class="effect-apollo">
                            <img src="./assets/images/4.jpg" alt="" class="prettyPhoto image_zoom">
                            <figcaption>
                                <a href="./assets/images/4.jpg" class="prettyPhoto image_zoom"></a>
                                <p>补水</p>
                            </figcaption>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 no-padding">
                    <div class="grid">
                        <div class="effect-apollo">
                            <img src="./assets/images/5.jpg" alt="" class="prettyPhoto image_zoom">
                            <figcaption>
                                <a href="./assets/images/5.jpg" class="prettyPhoto image_zoom"></a>
                                <p>精容</p>
                            </figcaption>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 no-padding">
                    <div class="grid">
                        <div class="effect-apollo">
                            <img src="./assets/images/6.jpg" alt="" class="prettyPhoto image_zoom">
                            <figcaption>
                                <a href="./assets/images/6.jpg" class="prettyPhoto image_zoom"></a>
                                <p>穿搭</p>
                            </figcaption>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 no-padding">
                    <div class="grid">
                        <div class="effect-apollo">
                            <img src="./assets/images/7.jpg" alt="" class="prettyPhoto image_zoom">
                            <figcaption>
                                <a href="./assets/images/7.jpg" class="prettyPhoto image_zoom"></a>
                                <p>摆拍</p>
                            </figcaption>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-12 no-padding">
                    <div class="grid">
                        <div class="effect-apollo">
                            <img src="./assets/images/8.jpg" alt="" class="prettyPhoto image_zoom">
                            <figcaption>
                                <a href="./assets/images/8.jpg" class="prettyPhoto image_zoom"></a>
                                <p>拍摄</p>
                            </figcaption>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ABOUT -->
    <div class="why_choose_us section-padding">
        <div class="container">
            <div class="row">
                <div class="section-title text-center wow zoomIn">
                    <h2>
                        关于我们的
                        <span>环境问题</span>
                    </h2>
                    <div class="line"></div>
                    <p>
                        这片草坪四季常青，不管是夏天太阳的暴晒，还是冬天风雨的洗礼，它却一直保持着原来的容颜。
                    </p>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div id="why_choose">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="single_feature">
                                    <i class="fa fa-leaf">❤</i>
                                    <h3>新鲜空气</h3>
                                    <span></span>
                                    <p>
                                        空气清新的像是被洗过一般，没有一点混浊，阳光下也看不到一丝尘埃。
                                        干净新鲜的空气是随手可得的。
                                     </p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="single_feature">
                                    <i class="fa fa-leaf">❤</i>
                                    <h3>新鲜空气</h3>
                                    <span></span>
                                    <p>空气清新的像是被洗过一般，没有一点混浊，阳光下也看不到一丝尘埃。
                                        干净新鲜的空气是随手可得的。 </p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="single_feature">
                                    <i class="fa fa-leaf">❤</i>
                                    <h3>新鲜空气</h3>
                                    <span></span>
                                    <p>空气清新的像是被洗过一般，没有一点混浊，阳光下也看不到一丝尘埃。
                                        干净新鲜的空气是随手可得的。 </p>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="single_feature">
                                    <i class="fa fa-leaf">❤</i>
                                    <h3>新鲜空气</h3>
                                    <span></span>
                                    <p>空气清新的像是被洗过一般，没有一点混浊，阳光下也看不到一丝尘埃。
                                        干净新鲜的空气是随手可得的。 </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="feature_img">
                        <img src="./assets/images/man.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ABOUT -->
    <div class="why_choose_us section-padding">
        <div class="container">
            <div class="row">
                <div class="section-title text-center wow zoomIn">
                    <h2>
                        关于我们的 
                        <span>体验</span>
                    </h2>
                    <div class="line"></div>
                    <p>
                        不一样的环境给您带来不一样的体验，不一样的环境却给您带来不一样的服务
                    </p>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="single_offer">
                        <div class="single_offer_img">
                            <img src="./assets/images/service_1.jpg" alt="" class="img-responsive">
                        </div>
                        <h4>石疗</h4>
                        <h5>$100</h5>
                        <a href="#" class="btn btn-default btn-feature-bg">阅读更多信息</a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="single_offer">
                        <div class="single_offer_img">
                            <img src="./assets/images/service_2.jpg" alt="" class="img-responsive">
                        </div>
                        <h4>按摩</h4>
                        <h5>$100</h5>
                        <a href="#" class="btn btn-default btn-feature-bg">阅读更多信息</a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="single_offer">
                        <div class="single_offer_img">
                            <img src="./assets/images/service_3.jpg" alt="" class="img-responsive">
                        </div>
                        <h4>补水</h4>
                        <h5>$100</h5>
                        <a href="#" class="btn btn-default btn-feature-bg">阅读更多信息</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- TESTIMONOALS -->
    <div class="testimonials">
        <div class="testimonials-h">
            <div class="testimonials-content">
                <div class="container">
                    <div id="testimonials" class="owl-carousel owl-theme owl-loaded owl-drag">
                        <div class="owl-stage-outer">
                            <div class="owl-stage">
                                <div class="owl-item cloned">
                                    <div class="item">
                                        <div class="img-testimonials">
                                            <img src="./assets/images/about-testimonials-img.png" alt="">
                                        </div>
                                        <p class="testimonials-p">
                                            <span>“</span>
                                            ​‌ 这是卡塔利纳唯一可以住的地方！我住在便宜的酒店，
                                            他们都很好，但这只是锦上添花！在骑自行车和徒步旅行了一天之后，
                                            回来喝杯酒，同时看看你的 
                                            海景窗口，然后将其全部关闭。。。
                                            <span>”</span>
                                        </p>
                                        <h5 class="sky-h5">布吉岛丁</h5>
                                        <p class="testimonials-p1">来自中国</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="owl-nav">
                            <div class="owl-prev"></div>
                            <div class="owl-next"></div>
                        </div>
                        <div class="owl-dots">
                            <div class="owl-dot active">
                                <span></span>
                            </div>
                            <div class="owl-dot">
                                <span></span>
                            </div>
                            <div class="owl-dot">
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- FOOTER -->
    <footer class="footer-sky" style="margin-top: 0px;">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1">
                        <div class="icon-email">
                            <a href="#" title="Email" style="display: block;">
                                <img src="./assets/images/footer-top-icon-l.png" alt="" class="img-responsive">
                            </a>
                        </div>
                    </div>
                        <div class="col-xs-12 col-sm-12 col-md-7 col-lg-5">
                            <div class="textbox">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="email" class="form-control" placeholder="Your email address">
                                            <button class="btn btn-secondary" type="button">
                                                <i class="ion-android-send"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-6 text-right">
                            <div class="footer-icon-l">
                                <a href="#">
                                    <i class="fa fa-twitter" aria-hidden="true"></i>
                                </a>
                                <a href="#">
                                    <i class="fa fa-facebook-square" aria-hidden="true"></i>
                                </a>
                                <a href="#">
                                    <i class="fa fa-tripadvisor" aria-hidden="true"></i>
                                </a>
                                <a href="#">
                                    <i class="fa fa-instagram" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <div class="footer-mid">
            <div class="container">
                <div class="row padding-footer-mid">
                    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                        <div class="footer-logo text-center list-content">
                            <a href="index.html">
                                <img src="./assets/images/sky-logo-footer.png" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                     col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                     <div class="list-content">
                         <ul>
                             <li>
                                 <a href="#">Site Map</a>
                             </li>
                             <li>
                                <a href="#">Term & Conditions</a>
                            </li>
                            <li>
                                <a href="#">Privacy Policy</a>
                            </li>
                            <li>
                                <a href="#">Help</a>
                            </li>
                            <li>
                                <a href="#">Affiliate</a>
                            </li>
                         </ul>
                     </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                     col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                     <div class="list-content">
                         <ul>
                             <li>
                                 <a href="#">Our Location</a>
                             </li>
                             <li>
                                <a href="#">Career</a>
                            </li>
                            <li>
                                <a href="#">About Us</a>
                            </li>
                            <li>
                                <a href="#">Contact Us</a>
                            </li>
                         </ul>
                     </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-2
                     col-lg-2 col-lg-offset-1 col-md-offset-1  ">
                     <div class="list-content">
                         <ul>
                             <li>
                                 <a href="#">FAQS</a>
                             </li>
                             <li>
                                <a href="#">News</a>
                            </li>
                            <li>
                                <a href="#">Photo & Video</a>
                            </li>
                            <li>
                                <a href="#">Restaurant</a>
                            </li>
                            <li>
                                <a href="#">Gift Card</a>
                            </li>
                         </ul>
                     </div>
                    </div>
                </div>
                <div class="footer-bottom"></div>
            </div>
        </div>
    </footer>


</body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    //获取id为background的元素
    var background = document.getElementById("background")

    //将视频速度调慢
    background.playbackRate = 10

    //实例化wow.js
    new WOW().init()


    // 滚动监听
    // a href == id 
    //锚点跳转滑动效果  
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#back a[href]').click(function() {  
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {  
            var $target = $(this.hash);  
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');  
            if ($target.length) {  
                var targetOffset = $target.offset().top;  
                $('html,body').animate({  
                            scrollTop: targetOffset  
                },1000);  
                return false;  
            }  
        }  
    });  

    //给页面绑定一个滚动条事件
    $(document).scroll(function(){
        //获取滚动条滚动长度大小
        var distance = $(this).scrollTop()

        //当滚动条滚动的长度大于10
        if(distance > 10)
        {
            //显示返回顶部
            $("#gotop").css({zIndex:99998,opacity:1});
            $("#header").css({backgroundColor:'#111111',paddingBottom:0});
        }else
        {
            //隐藏返回顶部
            $("#gotop").css({zIndex:-99998,opacity:0});
            $("#header").css({backgroundColor:'transparent',paddingBottom:'1em'});
        }
    })
</script>